<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
%>
<html>
	 <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="format-detection" content="telephone=no">
        <meta charset="UTF-8">

        <meta name="description" content="Violate Responsive Admin Template">
        <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

        <title>萌校商城后台</title>
        <script src="<%=path %>/assets2/js/jquery-1.11.1.min.js"></script>
        <script src="<%=path %>/assets2/js/bootstrap.min.js"></script>
        <link href="<%=path %>/assets2/js/sweetalert/sweetalert.css" rel="stylesheet">
   		<script src="<%=path %>/assets2/js/sweetalert/sweetalert-dev.js"></script>
   		<script src="<%=path %>/assets2/js/sweetalert/sweetalert.min.js"></script>    
   		<script src="<%=path %>/assets2/js/validation/validate.min.js"></script>
        <script src="<%=path %>/assets2/js/validation/validationEngine.min.js"></script>
        <script src="<%=path %>/assets2/js/validation/messages_zh.min.js"></script>
        <script src="<%=path %>/assets2/js/jquery.form.js"></script>
        <!-- CSS -->
        <link href="<%=path %>/assets2/css/bootstrap.min.css" rel="stylesheet">
		<link href="<%=path %>/assets2/css/styles.css" rel="stylesheet">
		
		
		<style>
			.imgSize{
				width:300px;
				height: 300px; 
			}
			.shanchuImg{
				margin-top: -75%;
			}
			.inputClass{
				width: 300px;
				margin-top: 6px;
			}
		</style>
    </head>
    <body>
	<div class="panel panel-default">
		<div class="panel-heading text-center">设置轮播</div>
		<div class="panel-body">
			<form role="form" class="form-validation" id="fm" action="<%=path%>/manager/addShufflingInstall" method="post" enctype="multipart/form-data">
				<div class="row">
					<div class="col-md-6">
						<div class="row">
							<div class="col-md-12 form-group">
								<label>图片轮播时长（秒）</label> <input type="text"
									class="validate[required] form-control"
									name="time" onKeyUp="value=value.replace(/[^\d]/g,'')">
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="row">
							<div class="col-md-12 form-group">
								<label>轮播描述</label> <input type="text"
									class="validate[required] form-control"
									name="shufflingDescribe">
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<label>轮播照片</label>
						<div class="row">
							<input type="file" class="goodsPhoto" name="goodsPhoto1" id="goodsPhoto1" style="display: none;">
							<input type="file" class="goodsPhoto" name="goodsPhoto2" id="goodsPhoto2" style="display: none;">
							<input type="file" class="goodsPhoto" name="goodsPhoto3" id="goodsPhoto3" style="display: none;">
							<input type="file" class="goodsPhoto" name="goodsPhoto4" id="goodsPhoto4" style="display: none;">
							<input type="file" class="goodsPhoto" name="goodsPhoto5" id="goodsPhoto5" style="display: none;">
							<input type="file" class="goodsPhoto" name="goodsPhoto6" id="goodsPhoto6" style="display: none;">
							<input type="file" class="goodsPhoto" name="goodsPhoto7" id="goodsPhoto7" style="display: none;">
							<input type="file" class="goodsPhoto" name="goodsPhoto8" id="goodsPhoto8" style="display: none;">
							<div class="col-xs-1" id="addCertificatePhotoDiv">
								<img class="img-thumbnail"
									src="<%=path%>/assets2/img/tianjia.png"
									onclick="addCertificatePhoto()">
							</div>
						</div>
					</div>
				</div>
				<br>
				<div class="row">
					<div class="col-md-12">
						<div class="row" id="photoDiv">
							
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div class="row">
							<br> <br>
							<div class="col-md-6 text-center">
								<button class="btn btn-lg btn-primary" id="subBtn" onclick="sub()" type="button">开始设置</button>
							</div>
							<div class="col-md-6 text-center">
								<button class="btn btn-lg btn-primary" onclick="returnBtn()" type="button">返回</button>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
   <script type="text/javascript">
   (function(){
		if($("[class*='form-validation']")[0]) {
		    $("[class*='form-validation']").validationEngine();
		    $('body').on('click', '.validation-clear', function(e){
			e.preventDefault();
			$(this).closest('form').validationEngine('hide');
		    });
		}
	})();
   $(function(){
	   
	   
   });
   //添加图片
   $('.goodsPhoto').on('change',function(){
	   var fileName=this.value;
		while (fileName.indexOf("\\") != -1)
		{
	    fileName = fileName.slice(fileName.indexOf("\\") + 1);
		}
	    var ext = fileName.slice(fileName.indexOf(".")).toLowerCase();
	    if(ext.indexOf("png") == -1 && ext.indexOf("jpg") == -1)
	    {
	    	swal({ 
				title: "操作失败", 
				text: "商品图片格式仅支持PNG、JPG", 
				type: "error",
			});
	    	return false;
	    }
		var objUrl = getObjectURL(this.files[0]);
		var photoDivId=this.id+"Div";
		$('#photoDiv').append('<div class="col-xs-3" id="'+photoDivId+'" style="margin-top: 4px;"><img class="imgSize" src="'+objUrl+'" style="position:relative">'
				+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delPhoto('+this.id+')" class="img-rounded shanchuImg" '
				+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)">'
				+'<input type="text" class="inputClass validate[required] form-control" name="photoUrl"  required="required"  placeholder="请输入照片跳转的路径">'
				+'<input type="text" class="inputClass validate[required] form-control" name="photoDescribe"  placeholder="请输入照片的描述"  required="required"></div>');
   });
   //判断图数量
   function addCertificatePhoto(){
	   var flag=false;
		$('.goodsPhoto').each(function(){
		    if($(this).val()==null||$(this).val()==''){
		    	$(this).click();
		    	flag=true;
		    	return false;
		    }
		  });
		if(!flag){
			swal({ 
				  title: "操作失败", 
				  text: "商品图片不得大于8张图片", 
				  type: "error",
				});
		}
   };
		
	
   //删除照片
   function delPhoto(file){
	   var fileId=file.id;
		$('#'+fileId).val('');
		$('#'+fileId+"Div").remove();
   };
  //添加轮播
  function sub(){
	  if($("#fm").validationEngine("validate")){
		  if($('#goodsPhoto3').val()==null||$('#goodsPhoto3').val()==''){
				swal({ 
					  title: "操作失败", 
					  text: "上传图片补得少于三张", 
					  type: "error",
					});
				return false;
			}  
		  $("#subBtn").attr('disabled',"false")
		  $('#fm').ajaxSubmit({
				beforeSubmit:function(){
					$("#subBtn").unbind("click");
				},success:function(data) { 
				if(data.state==1){
					$("#subBtn").attr('disabled',"true")
					swal({ 
						  title: "操作成功", 
						  text: "设置轮播成功", 
						  type: "success",
						},
						function(){
							openBodyHtml('<%=path %>/jsp/manager/shufflingList.jsp');
						});
				}else{
					$("#subBtn").attr('disabled',"true")
					swal({ 
						  title: "操作失败", 
						  text: "设置轮播失败", 
						  type: "error",
						},function(){
							$('#subBtn').on("click",function(){
// 								sub();
							})
						});
						
					}
				}
			})
	  }
  };
  
  //返回
  function returnBtn(){
	  openBodyHtml('<%=path %>/jsp/manager/shufflingList.jsp');
  };
  
 	//建立一個可存取到該file的url  
	function getObjectURL(file) {
	  var url = null ;
	  // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
	  if (window.createObjectURL!=undefined) { // basic  
	    url = window.createObjectURL(file) ;  
	  } else if (window.URL!=undefined) { // mozilla(firefox)  
	    url = window.URL.createObjectURL(file) ;  
	  } else if (window.webkitURL!=undefined) { // webkit or chrome  
	    url = window.webkitURL.createObjectURL(file) ;  
	  }  
	  return url ;  
	}  
   </script>
</html>